import { Upload,Input,Button, Modal, Table, Popover,message } from 'antd';
import { UploadOutlined,PlusOutlined } from '@ant-design/icons';
import { CURRENT_ENV,hostMap } from '@/ajax/config';
import ScheduleItemsController from '@/services/scheduleItems/ScheduleItemsController';

import React from 'react';
const {TextArea}=Input
const {confirm} = Modal
class ExecutionItem extends React.Component {
    constructor(props) {
        super(props);
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.state = { 
            datas:[],
            rowData:props.rowData,
            freshen:true,
            fileList:[],
            userInfo:userInfo
         };
    }
    componentDidMount(){
        this.props.onRef(this)
    }
    handleChange=(info)=>{
        
        let fileList = [...info.fileList];
        fileList = fileList.slice(-2);
        fileList = fileList.map(file => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });
    this.setState({ fileList });
    }
    freshen=()=>{
        this.setState({freshen:!this.state.freshen})
    }
    textChange=(e)=>{
        this.setState({description:e.target.value})
    }
    deleteItem=(index)=>{

        let {datas} = this.state
        datas.splice(index,1)
        this.setState({datas})
        this.freshen()

    }
    addItem=()=>{
        let {datas,fileList,description} = this.state
        if(fileList.length===0){
            message.error('请上传文件')
            return
        }
        datas.push({url:fileList[0].response,description,fileName:fileList[0].name})
        this.setState({datas,visible:false,fileList:[],description:''})
        this.freshen()
    }
    getStr=(str)=>{
        let result =''
        if(str.length>15){
            result=str.slice(0,15)+"……"
        }else{
            result=str
        }
        return result;
    }
    submit=()=>{
        let {datas,rowData,userInfo}=this.state
        let that = this
        if(datas.length===0){
            message.error('至少上传一个文件')
            return;
        }
        let params={
            files:JSON.stringify(datas),
            id:rowData.id,
            userName:userInfo.userName
        }
        confirm({
            title:'提示',
            content:'确定要提交吗？',
            onOk(){
                ScheduleItemsController.executionSubmit(params).then(r=>{
                    if(r&&r.data===1){
                        message.success('提交成功')
                        that.props.onCancel()
                    }
                })
            }
        })
   

    }
    render() {
        const {datas,visible,freshen,userInfo}=this.state
        const columns=[
            {title:'序号',dataIndex:'url',render:(text,row,index)=>index+1},
            {title:'文件名',dataIndex:'fileName'},
            {title:'描述',dataIndex:'description',render:text=><Popover placement="topLeft" title={'详情'} content={text} trigger="click" >{this.getStr(text)}</Popover>},
            {title:'操作',dataIndex:'',render:(text,row,index)=><a onClick={this.deleteItem.bind(this,index)}>删除</a>},

        ]
        return (
            <div>
                <Button icon={<PlusOutlined/>} onClick={()=>this.setState({visible:true})} type={'primary'}>增加</Button>
                {freshen&&<Table dataSource={datas} columns={columns} bordered />}
                {!freshen&&<Table dataSource={datas} columns={columns} bordered />}
                {visible&&<Modal
                visible={visible}
                title={'新增'}
                onCancel={()=>this.setState({visible:false})}
                onOk={this.addItem}
                >
                <Upload
                    action= {hostMap[CURRENT_ENV]+"/upload"}
                    onChange= {this.handleChange}
                    headers={{"token":userInfo.token}}
                    fileList={this.state.fileList}
                    >
                        <span><Button icon={<UploadOutlined />} style={{width:200,margin:5}} type={'primary'}>上传</Button></span>
                </Upload>
                <TextArea placeholder={'请输入'} onChange={this.textChange.bind(this)}/>
                </Modal>}
            </div>
        );
    }
}

export default ExecutionItem;